{% extends 'frame.html' %}
{% block title %}Automagic{% endblock %}
{% block slideshow %}
    <div class="ak-zper-midbox ak-jsch-mid">
        <div class="ak-zper-inbox-title ak-jsch-title clearfix">
            <div class="ak-left ak-jsch-row3 ak-zper-fix-btnbox">
                <span class="ak-zper-remindback"></span>
                <span class="inbox-text">接口列表</span>
            </div>

            <select id="selproductid" name="productname" class="ak-right ak-left ac-aselect ac-margint8">
                <option value="0">-请选择产品-</option>
                {% for product in userandproduct %}
                    {% if product.username == request.user %}
                        <option value="{{ product.productname.id }}"
                                {% if request.GET.check_productname  == product.productname.id %}selected{% endif %}>{{ product.productname.name }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>

        <!--      ---------------------华丽的分割线 main------------------------ -->
        <div class="col-md-12">
            <div class="ac-margin-tb15">
                <div class="panel panel-default" id="accordion">
                    <div class="panel-heading">
                        <form class="form-inline" id="search" role="form" action="" method="GET">
                            <input id="check_productid" value="0" name="check_productname" hidden="true">
                            <select id="selprojectid" name="projectid" class="ak-left ac-aselect col01">
                            </select>
                            <select id="selmoduleid" name="moduleid" class="ak-left ac-aselect col01">
                                <option value="">所属模块</option>
                            </select>
                            <select name="casestatus" class="ak-left ac-aselect col02">
                                <option value="">状态</option>
                                <option value="True" {% if request.GET.casestatus == 'True' %} selected {% endif %}>启 用</option>
                                <option value="False" {% if request.GET.casestatus == 'False' %} selected {% endif %}>停 用</option>
                            </select>

                            <select name="testresult" class="ak-left ac-aselect col02">
                                <option value="">测试结果</option>
                                <option value="PASS" {% if request.GET.casestatus == 'PASS' %} selected {% endif %}>通 过</option>
                                <option value="FAILED" {% if request.GET.casestatus == 'FAILED' %} selected {% endif %}>失 败</option>
                            </select>

                            <div class="input-group">
                                <input type="input" class="form-control search-width" name="keyword"
                                       value="{{ request.GET.keyword }}" placeholder="通过用例ID或描述、作者等关键字搜索">
                                <span class="input-group-btn">
                                      <button class="btn btn-primary" type="submit" id="search_btn">Go!</button>
                                </span>
                            </div>
                            <a href="#" data-toggle="modal"  data-target="#runconfig" class="ak-right ac-btn-addcase orange ac-amargin-r10">执行测试</a>
                            <a href="/interface/file_down/interface-{{ request.GET.projectid }}.xls" class="ak-right ac-btn-adduser blue ac-amargin-r10">下载模版</a>
                        </form>
                        <div>
                            <input type="file" name="file" id="file_upload">
                            <input type="button" value="上传用例" onclick="FileUpload()">
                        </div>
                        <!-- /input-group -->
                    </div>

                    <table id="mytable" class="table table-striped table-hover table-condensed ac-aelement-table">
                        <thead>
                        <tr>
                            <th>用例ID</th>
                            <th>请求方法</th>
                            <th>接口信息</th>
                            <th>依赖用例</th>
                            <th>依赖参数</th>
                            <th>依赖方式</th>
                            <th>测试结果</th>
                            <th>查看</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for interface in interfacelist %}
                        <tr>
                            <td>{{ interface.interfaceid }}</td>
                            <td><label class="label label-info">{{ interface.method |upper }}</label></td>
                            <td>{{ interface.url }}</td>
                            <td><span style="padding-right: 20px;"><label>{{ interface.dependent }}</label></span></td>
                            <td><span style="padding-right: 60px;"><label>{{ interface.dependentparam }}</label></span></td>
                            <td><span style="padding-right: 60px;"><label>{{ interface.dependentway }}</label></span></td>
                            <td><span style="padding-right: 20px;"><label>{{ interface.actual }}</label></span></td>
                            <td>
                                <a href="#" title="查看"
                                   onclick="viewinterfacehistory({{ interface.id }})"
                                   class="ke-ablock" data-toggle="modal" data-target="#viewinterfacehistory">
                                    <i class="glyphicon glyphicon-eye-open"></i></a>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>

                    </table>

                </div>

                {% if is_paginated %}
                    <div class="panel-default">
                        <ul class="pagination">
                            <li>
                                <a href="javascript:window.location.href=window.location.search.match(/page=(\d+|\s*)/)===null? window.location.origin+(window.location.pathname +'?page=1'+(window.location.search?window.location.search.replace('?','&'):'')):window.location.search.replace(/page=(\d+|\s*)/, 'page=1')">«</a>
                            </li>
                            {% if page_obj.has_previous %}
                                <!--<li><a href="{{ request.get_full_path }}&page={{ page_obj.previous_page_number }}">上一页</a></li>-->
                                <li>
                                    <a href="javascript:window.location.href=window.location.search.match(/page=(\d+|\s*)/)===null? window.location.href +'?page={{ page_obj.previous_page_number }}': window.location.search.replace(/page=(\d+|\s*)/, 'page={{ page_obj.previous_page_number }}')">上一页</a>
                                </li>
                            {% else %}
                                <li class="previous disabled"><a>上一页</a></li>
                            {% endif %}

                            {% if page_obj.has_next %}
                                <li>
                                    <a href="javascript:window.location.href=window.location.search.match(/page=(\d+|\s*)/)===null? window.location.origin+(window.location.pathname +'?page={{ page_obj.next_page_number }}'+(window.location.search?window.location.search.replace('?','&'):'')):window.location.search.replace(/page=(\d+|\s*)/, 'page={{ page_obj.next_page_number }}')">下一页</a>
                                </li>
                            {% else %}
                                <li class="previous disabled"><a>下一页</a></li>
                            {% endif %}

                            <li>
                                <a href="javascript:window.location.href=window.location.search.match(/page=(\d+|\s*)/)===null? window.location.origin+(window.location.pathname +'?page={{ page_obj.paginator.num_pages }}'+(window.location.search?window.location.search.replace('?','&'):'')):window.location.search.replace(/page=(\d+|\s*)/, 'page={{ page_obj.paginator.num_pages }}')">»</a>
                            </li>
                            <li><a>当前第{{ page_obj.number }}页/共{{ casesum }}条</a></li>
                            <li><input id="curpage" class="ac-acaseedit-input" type="number" style="width: 80px;"></li>
                            <li>
                                <button id="btn_skip" onclick="btn_skip_click()" type="button"
                                        class="btn btn-sm btn-primary">确定
                                </button>
                            </li>
                        </ul>
                    </div>
                {% endif %}

            </div>
        </div>
        <!--      ---------------------华丽的分割线 main end------------------------ -->

    </div>

    <!-- interface history -->
    <div class="modal fade ak-min-fullwidth-modal ak-znews-addsort-modal" id="viewinterfacehistory" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                  <div class="modal-content" style="width: 1000px;">
                        <div class="modal-header clearfix">
                              <button type="button" class="close close-back" data-dismiss="modal"> <span class="sr-only">Close</span> </button>
                              <h4 class="modal-title text-center">接口执行历史</h4>
                        </div>
                        <div class="modal-body ak-main-body">
                            <table class="table table-striped table-hover table-condensed ac-aelement-table">
                                <thead>
                                  <tr>
                                      <th>序号</th>
                                      <th>测试结果</th>
                                      <th>执行时间</th>
                                      <th>请求头</th>
                                      <th>执行参数</th>
                                      <th>预期结果</th>
                                      <th>实际结果</th>
                                  </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>

                        </div>
                  </div>
            </div>
    </div>

    <!-- interface runconfig -->
    <div class="modal fade ak-min-fullwidth-modal ak-znews-addsort-modal" id="runconfig" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                  <div class="modal-content" style="width: 800px;">
                        <div class="modal-header clearfix">
                              <button type="button" class="close close-back" data-dismiss="modal"> <span class="sr-only">Close</span> </button>
                              <h4 class="modal-title text-center">运行配置</h4>
                        </div>
                        <div class="modal-body ak-main-body">
                            <form method='post'  id="run_config">
                                {% csrf_token %}
                                <select id="projectid" name="projectid" class="ak-right ak-left ac-aselect ac-margint8">
                                    <option value="0">-请选择测试产品-</option>
                                    {% for product in userandproduct %}
                                        {% if product.username == request.user %}
                                            <option value="{{ product.productname.id }}"
                                                    {% if request.GET.check_productname  == product.productname.id %}selected{% endif %}>{{ product.productname.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <div class="ak-jsch-modal-item clearfix"><span class="ak-left ak-jsch-item-left ">是否发送邮件</span>
                                    <div class="sky-form col01 ak-left ac-ml10">
                                        <label class="toggle">
                                            <input type="checkbox" id="isenabled" name="isenabled" checked="checked">
                                            <i class="rounded-4x ak-aoffon-btn"></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="ak-jsch-modal-item ak-jsch-pt clearfix">
                                     <span class="ak-jsch-item-left ak-left">邮件服务器</span>
                                     <div class="ak-jsch-item-right ak-left">
                                         <input style="width:500px;" value="smtp.testor.com.cn" id="smpt_address" name="smpt_address" type="text" placeholder="请输入邮箱服务器地址" class="ac-acaseedit-input" />
                                     </div>
                                </div>
                                <div class="ak-jsch-modal-item ak-jsch-pt clearfix">
                                     <span class="ak-jsch-item-left ak-left">服务器端口</span>
                                     <div class="ak-jsch-item-right ak-left">
                                         <input style="width:500px;" value="25" id="smpt_port" name="smpt_port" type="text" placeholder="请输入邮箱服务器端口" class="ac-acaseedit-input" />
                                     </div>
                                </div>
                                <div class="ak-jsch-modal-item ak-jsch-pt clearfix">
                                    <span class="ak-jsch-item-left ak-left">发件人</span>
                                    <div class="ak-jsch-item-right ak-left">
                                        <input style="width:500px;" id="email_user" name="email_user" type="text" placeholder="请输入发件人邮箱" class="ac-acaseedit-input" />
                                    </div>
                                </div>
                                <div class="ak-jsch-modal-item ak-jsch-pt clearfix">
                                     <span class="ak-jsch-item-left ak-left">发件人密码</span>
                                     <div class="ak-jsch-item-right ak-left">
                                         <input style="width:500px;" id="email_password" name="email_password" type="password" placeholder="请输入发件人邮箱密码" class="ac-acaseedit-input" />
                                     </div>
                                </div>
                                <div class="ak-jsch-modal-item ak-jsch-pt clearfix">
                                     <span class="ak-jsch-item-left ak-left">收件人列表</span>
                                     <div class="ak-jsch-item-right ak-left">
                                         <input style="width:500px;" id="receivers" name="receivers" type="text" placeholder="请输入收件人邮箱用;隔开" class="ac-acaseedit-input" />
                                     </div>
                                 </div>
                                <div class="modal-footer">
                                     <!--===footer button ===-->
                                     <div class="ak-footer-btn text-left">
                                         <input class="ak-zdl-createbtn" type="submit" value="提交">
                                         <input class="ak-zdl-createbtn cancel" type="reset" value="重置">
                                     </div>
                                     <!--===End footer button ===-->
                                </div>

                            </form>
                        </div>
                  </div>
            </div>
    </div>
{% endblock %}

{% block script %}
    {% load static %}
    <script>
        function viewinterfacehistory(id) {
            $.ajax({
                type:"GET",
                data:{'webinterfaceid':id},
                url: "/interface/interfacehistory/",
                cache: false,
                dataType:'json',
                async:false,

                success: function(result, TextStatus) {
                    $("#viewinterfacehistory .ak-main-body").empty();
                    var tmpHtml = ''
                    for(i=0; i<result.length; i++) {
                        tmpHtml += '<tr>' +
                            '<td width="30">'+result[i].id+'</td>' +
                            '<td width="50">'+result[i].actual+'</td>' +
                            '<td width="68">'+result[i].exectime+'</td>' +
                            '<td width="100">'+result[i].headers+'</td>' +
                            '<td width="100">'+result[i].params+'</td>' +
                            '<td width="100">'+result[i].expected+'</td>' +
                            '<td width="auto">'+result[i].Response_content+'</td>' +
                            '</tr>'
                    }
                    var tpl = ' <table class="table table-striped table-hover table-condensed ac-aelement-table" style="word-break:break-all; word-wrap:break-all;">'+
                        '<thead>'+
                        '<tr>'+
                            '<th>序号</th>'+
                            '<th>测试结果</th>'+
                            '<th>执行时间</th>'+
                            '<th>请求头</th>'+
                            '<th>执行参数</th>'+
                            '<th>预期结果</th>'+
                            '<th>实际结果</th>'+
                        '</tr>'+
                        '</thead>'+

                        '<tbody>'+
                            tmpHtml +
                        '</tbody>'+

                        '</table>'
                    $('#viewinterfacehistory .ak-main-body').append(tpl);
                    $('#viewinterfacehistory table').DataTable({
                        // "sScrollX": "100%",   //表格的宽
                        // "sScrollXInner": "100%",
                        "bPaginate": true,  //是否显示分页
                        "bLengthChange": true,  //每页显示的记录数
                        "bFilter": false, //搜索栏
                        "bSort": true, //是否支持排序功能
                        "bInfo": true, //显示表格信息
                        "bAutoWidth": true,  //自适应宽度
                        "aaSorting": [[0, "desc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
                        "oLanguage": {
                            "sLengthMenu": "每页显示 _MENU_ 条记录",
                            "sZeroRecords": "对不起，查询不到任何相关数据",
                            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                            "sInfoEmtpy": "找不到相关数据",
                            "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                            "sProcessing": "正在加载中...",
                            "sSearch": "搜索",
                            "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                            "oPaginate": {
                                "sFirst": "第一页",
                                "sPrevious": " 上一页 ",
                                "sNext": " 下一页 ",
                                "sLast": " 最后一页 "
                            },
                        }, //多语言配置
                    });
                },
                error:function (result) {
                    alert(result);
                }

            });
        }

        $(document).ready(function () {
            $("#accordion").find(".panel-collapse").each(function () {
                $(this).collapse('hide')
            })
        })
        function btn_skip_click() {
            var currpage = $('#curpage').val() === '' ? 1 : parseInt($('#curpage').val());
            // console.log(currpage);
            if (currpage > {{ page_obj.paginator.num_pages }}) {
                currpage = {{ page_obj.paginator.num_pages }};
            }
            if (currpage < 1) {
                currpage = 1;
            }
            var url = window.location.search.match(/page=(\d+|\s*)/) === null ? window.location.origin + (window.location.pathname + '?page=' + currpage + (window.location.search ? window.location.search.replace('?', '&') : '')) : window.location.search.replace(/page=(\d+|\s*)/, 'page=' + currpage);
            self.location = url;

            return false;
        }

        $('#curpage').keypress(function (event) {
            console.log(event.which);
            if (event.which == 13) {
                btn_skip_click()
            }
            event.stopPropagation();
        })

        function FileUpload() {
            var form_data = new FormData();
            var file_info =$( '#file_upload')[0].files[0];
            form_data.append('file',file_info);
            //if(file_info==undefined)暂且不许要判断是否有附件
                //alert('你没有选择任何文件');
                //return false
            $.ajax({
                url:'/interface/upload_file/',
                type:'POST',
                data: form_data,
                processData: false,  // tell jquery not to process the data
                contentType: false, // tell jquery not to set contentType
                headers: {
                    "X-CSRFToken": getCookie("csrftoken")
                },

                success: function(data) {
                    data = JSON.parse(data)
                    if (data.code == 200) {
                        alert(data.msg);
                    }
                    else {
                        alert(data.msg);
                    }
                }
            });
        }
        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }
    </script>
{% endblock %}
